<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
  overflow: hidden;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
h1 {
  position: relative;
  color: #464678;
  text-align: center;
  line-height: 8rem;
  font-size: 2rem;
  z-index: 100;
}
.aim {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 50;
  -webkit-transform: translate3d(0, 0, 0);
}
.aim .c {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  background: #000;
  margin: -5px 0 0 -5px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border: 1px solid #77f;
}
.aim .h {
  position: absolute;
  top: 1px;
  left: -50%;
  width: 200%;
  height: 1px;
  background: #77f;
  opacity: 0.5;
}
.aim .v {
  position: absolute;
  top: -50%;
  left: 1px;
  width: 1px;
  height: 200%;
  background: #77f;
  opacity: 0.5;
}

	</style>
</head>
<body>
	<canvas id="sparks"></canvas>
</body>
</html>
<script type="text/javascript">
	"use strict";

var OPT = {
  selector: "#sparks",
  amount: 10000,
  speed: 0.1, // pixels per frame
  lifetime: 500,
  direction: { x: -0.5, y: 1 },
  size: [1, 1],
  maxopacity: 1,
  color: "150, 150, 150",
  randColor: true,
  acceleration: [5, 40]
};

if (window.innerWidth < 520) {
  OPT.speed = 0.05;
  OPT.color = "150, 150, 150";
}

(function spark() {
  var canvas = document.querySelector(OPT.selector);
  var ctx = canvas.getContext("2d");

  var sparks = [];

  window.addEventListener('resize', function () {
    setCanvasWidth();
  });

  function setCanvasWidth() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
  }

  function rand(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  // Init animation
  function init() {
    setCanvasWidth();

    window.setInterval(function () {
      if (sparks.length < OPT.amount) {
        addSpark();
      }
    }, 1000 / OPT.amount);

    window.requestAnimationFrame(draw);
  }

  function draw() {
    ctx.fillStyle = 'rgba(0,0,0, 0.1)';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    sparks.forEach(function (spark, i, array) {

      if (spark.opacity <= 0) {
        array.splice(i, 1);
      } else {
        drawSpark(spark);
      }
    });

    window.requestAnimationFrame(draw);
  }

  function Spark(x, y) {
    this.x = x;
    this.y = y;
    this.age = 0;
    this.acceleration = rand(OPT.acceleration[0], OPT.acceleration[1]);

    this.color = OPT.randColor ? rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) : OPT.color;

    this.opacity = OPT.maxopacity - this.age / (OPT.lifetime * rand(1, 10));

    this.go = function () {
      this.x += OPT.speed * OPT.direction.x * this.acceleration / 2;
      this.y += OPT.speed * OPT.direction.y * this.acceleration / 2;

      this.opacity = OPT.maxopacity - ++this.age / OPT.lifetime;
    };
  }

  function addSpark() {
    var x = rand(-200, window.innerWidth + 200);
    var y = rand(-200, window.innerHeight + 200);
    sparks.push(new Spark(x, y));
  }

  function drawSpark(spark) {
    var x = spark.x,
        y = spark.y;

    spark.go();

    ctx.beginPath();
    ctx.fillStyle = "rgba(" + spark.color + ", " + spark.opacity + ")";
    ctx.rect(x, y, OPT.size[0], OPT.size[1], 0, 0, Math.PI * 2);
    ctx.fill();
  }

  init();
})();
</script>